spb/maclustr-research

1import type { Metadata } from "next";2import { ArchitectureDiagram } from "@/components/infrastructure/ArchitectureDiagram";3import { PageIntro } from "@/components/ui/Section";4import { nodes } from "@/lib/data";5import { getDict, type Locale } from "@/lib/i18n";6import { aggregate } from "@/lib/inventory";7import { pageMetadata } from "@/lib/seo";89type Props = { params: Promise<{ locale: Locale }> };1011export async function generateMetadata({ params }: Props): Promise<Metadata> {12  return pageMetadata((await params).locale, "architecture", "/architecture");13}1415export default async function ArchitecturePage({ params }: Props) {16  const { locale } = await params;17  const a = getDict(locale).architecture;18  const agg = aggregate(nodes);19  const memoryMax = Math.max(...nodes.map((n) => n.unifiedMemoryGB ?? 0)) || null;20  return (21    <>22      <PageIntro eyebrow={a.eyebrow} title={a.title} intro={a.intro} />23      <section aria-labelledby="diagram-h" className="border-y border-line bg-surface py-14 md:py-20">24        <div className="shell">25          <h2 id="diagram-h" className="label text-center">{a.diagramTitle}</h2>26          <div className="reveal mt-8"><ArchitectureDiagram locale={locale} nodeCount={agg.documented} memoryMax={memoryMax} /></div>27          <p className="mx-auto mt-8 max-w-[60ch] text-center text-[0.8125rem] leading-relaxed text-mute">{a.diagramNote}</p>28        </div>29      </section>30      <div className="shell grid gap-12 pt-16 md:pt-24 lg:grid-cols-12">31        <nav aria-label={a.eyebrow} className="hidden lg:col-span-3 lg:block">32          <ol className="sticky top-24 space-y-3 border-l border-line pl-5 text-[0.875rem]">33            {a.sections.map((s, i) => (34              <li key={s.id}><a className="text-mute hover:text-fg" href={`#${s.id}`}><span className="num mr-3 font-mono text-[0.6875rem] text-accent">{String(i + 1).padStart(2, "0")}</span>{s.title}</a></li>35            ))}36          </ol>37        </nav>38        <div className="lg:col-span-9">39          {a.sections.map((s, i) => (40            <section key={s.id} id={s.id} aria-labelledby={`${s.id}-h`} className="reveal scroll-mt-24 border-t border-line py-12 first:border-0 first:pt-0 md:py-16">41              <p className="num font-mono text-[0.6875rem] tracking-[0.1em] text-accent">{String(i + 1).padStart(2, "0")}</p>42              <h2 id={`${s.id}-h`} className="h2 mt-4 max-w-[22ch]">{s.title}</h2>43              {s.body.map((p) => <p key={p.slice(0, 32)} className="prose-tech mt-6">{p}</p>)}44            </section>45          ))}46        </div>47      </div>48    </>49  );50}51